<template>
  <div class="header-container">
    <div class="l-content">
      <el-button icon="el-icon-menu" size="mini" @click="flod" style="margin-right: 15px;"></el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in name1" :key="item.name"  :to="{path:item.path}"> 
        {{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="../images/85.jpg" alt="" class="user" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <span @click="go"><el-dropdown-item>退出 </el-dropdown-item></span>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import Cookie from 'js-cookie'
export default {
  name: "CommonHeader",
  data() {
    return {
    };
  },
  methods: {
    flod() {
      this.$store.commit("collapseMenu");
    },
    headerx(item){
      if(item.path!=this.$route.path)
      {
this.$router.push(item.path)
      }
    },
    go(){ 
    //  this.router.removeRoute('home')
    location.reload()
      Cookie.remove('token')
      Cookie.remove('menu')
      this.$router.push('/logain')
     
    }
  },
  //方法1
  // mounted(){
  //   this.$bus.$on("soot",(item)=>{
  //     if(this.name1==''&&item!='首页')
  //     this.name1.push(item)
  //     else
  //     {
  //       if(this.name1.every(items=>items!=item)&&item!='首页')
  //       {
  //      this.name1.push(item)
  //     }
  //   }    
  // })
  // }
computed:{
  ...mapState({
    name1:state=>state.tab.valx
  })
}
};
</script>

<style lang="css" scoped>
.header-container {
  background-color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
/* .text {
  color:#fff!important;
  font-size: 14px;
  margin-left: 10px;
} */
.user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.l-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
::v-deep .el-breadcrumb__inner.is-link{
  color: #666;
  font-weight: normal;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
  color: #fff;
}
</style>